Tiny File Manager | radial-min-path-20250630162506-20250701071226.html

/ examples : radial-min-path-20250630162506-20250701071226.html

Back Back Up Advanced Editor

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <script src="../gauge.min.js"></script>
    <style>body {
        padding: 0;
        margin: 0;
        background: #fff
    }</style>
</head>
<body>

<input type="text" id="gauge-value" placeholder="put new gauge value here" value="0">
<button onclick="animateGauges()">Animate</button>

<hr>

<canvas data-type="radial-gauge"
        data-width="500"
        data-height="500"
        data-min-value="0"
        data-max-value="360"
        data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
        data-minor-ticks="22"
        data-ticks-angle="360"
        data-start-angle="180"
        data-stroke-ticks="false"
        data-highlights="false"
        data-color-plate="#33a"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-numbers="#ccc"
        data-color-needle="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="true"
        data-animated-value="true"
        data-value-text-shadow="false"
        data-color-circle-inner="#fff"
        data-color-needle-circle-outer="#ccc"
        data-needle-circle-size="15"
        data-needle-circle-outer="false"
        data-animation-rule="linear"
        data-needle-type="line"
        data-needle-start="75"
        data-needle-end="99"
        data-needle-width="3"
        data-borders="true"
        data-border-inner-width="0"
        data-border-middle-width="0"
        data-border-outer-width="10"
        data-color-border-outer="#ccc"
        data-color-border-outer-end="#ccc"
        data-color-needle-shadow-down="#222"
        data-border-shadow-width="0"
        data-animation-target="needle"
        data-units="ᵍ"
        data-title="DIRECTION"
        data-font-title-size="19"
        data-color-title="#f5f5f5"
        data-animation-duration="1500"
        data-value="5"
        data-animate-on-init="true"
        data-use-min-path="true"
></canvas>

<canvas data-type="radial-gauge"
        data-width="500"
        data-height="500"
        data-min-value="0"
        data-max-value="360"
        data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
        data-minor-ticks="22"
        data-ticks-angle="360"
        data-start-angle="180"
        data-stroke-ticks="false"
        data-highlights="false"
        data-color-plate="#33a"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-numbers="#ccc"
        data-color-needle="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="true"
        data-animated-value="true"
        data-value-text-shadow="false"
        data-color-circle-inner="#fff"
        data-color-needle-circle-outer="#ccc"
        data-needle-circle-size="15"
        data-needle-circle-outer="false"
        data-animation-rule="linear"
        data-needle-type="line"
        data-needle-start="75"
        data-needle-end="99"
        data-needle-width="3"
        data-borders="true"
        data-border-inner-width="0"
        data-border-middle-width="0"
        data-border-outer-width="10"
        data-color-border-outer="#ccc"
        data-color-border-outer-end="#ccc"
        data-color-needle-shadow-down="#222"
        data-border-shadow-width="0"
        data-animation-target="plate"
        data-units="ᵍ"
        data-title="DIRECTION"
        data-font-title-size="19"
        data-color-title="#f5f5f5"
        data-animation-duration="1500"
        data-value="5"
        data-animate-on-init="true"
        data-use-min-path="true"
></canvas>

<script>
    if (!Array.prototype.forEach) {
        Array.prototype.forEach = function(cb) {
            var i = 0, s = this.length;
            for (; i < s; i++) {
                cb && cb(this[i], i, this);
            }
        }
    }

document.fonts && document.fonts.forEach(function(font) {
        font.loaded.then(function() {
            if (font.family.match(/Led/)) {
                document.gauges.forEach(function(gauge) {
                    gauge.update();
                });
            }
        });
    });

function animateGauges() {
        document.gauges.forEach(function(gauge) {
            gauge.value = parseFloat(
                document.getElementById('gauge-value').value) || 0;
            setTimeout(function() {
                console.log('new gauge value:' + gauge.value);
            }, 1510);
        });
    }
</script>
</body>
</html>